import { useState, useEffect } from 'react'
import './index.less'
import TestUseReducer from './TestUseReducer'
import TestUseMemo from './TestUseMemo'
import TestUseCallback from './TestUseCallback'
import TextCustomHook from './TextCustomHook'
import { useRef } from 'react'
import { Button, Input } from 'antd';

export default function Hook(props) {
  // 1 useState
  const [count, setCount] = useState(0)
  const clickCountBtn = () => {
    setCount(count + 1)
  }
  // useState 根据props定义初始值
  const [number, setNumber] = useState(() => {
    return (props.initNumber > 10) ? props.initNumber + 2 : props.initNumber + 1
  })
  const clickNumberBtn = () => {
    setNumber(() => {
      return (number > 3) ? number + 2 : number + 1
    })
  }
  // useState 初始值是对象
  const [person, setPerson] = useState({ name: 'luo', age: 20 })
  const clickPersonBtn = () => {
    setPerson(() => {
      return {
        name: person.name + '.',
        age: person.age + 1
      }
    })
  }
  // console.log('如果组件中的state或者props更新，那么组件就会重新执行')

  // 2 useEffect count变化触发
  // useLayoutEffect DOM刷新后就触发 在useEffect之前触发
  useEffect(() => {
    // 刷新页面触发componentDidMount count为0 然后已执行过的setCount(555)再次触发effect count为555
    // setCount(555)
    // 相当于 componentDidMount componentDidUpdate
    console.log(`这个useEffect执行了，you click ${count} times`)
    document.title = `person is ${person.name} -- ${person.age}`
    // 相当于 前一次的 componentWillUnmount
    return () => { console.log('组件更新(props或者state变化)或者组件卸载了') }
    // 如果不传入第二个参数 那任何props或者state变化触发的componentDidUpdate都会执行
    // 如果第二个参数传入[] 那componentDidUpdate不会执行
    // 如果第二个参数传入[count] 那componentDidUpdate只在count变化的时候执行
  }, [count])
  // 执行顺序
  // you click 0 times
  // 组件更新(props或者state变化)或者组件卸载了
  // you click 1 times
  // 组件更新(props或者state变化)或者组件卸载了
  // you click 2 times
  // 组件更新(props或者state变化)或者组件卸载了

  // 6 useRef
  const [text, setText] = useState('')
  const inputRef = useRef(null)
  useEffect(() => {
    inputRef.current.value = text
  })

  // 计时器
  const addZero = (num) => {
    return (num >= 10) ? (num + '') : ('0' + num)
  }
  const [hour, setHour] = useState('00')
  const [minute, setMinute] = useState('00')
  const [sencond, setSencond] = useState('00')
  let [timer, setTimer] = useState(null)
  const start = () => {
    const initTime = new Date().getTime()
    clearInterval(timer)
    timer = setInterval(() => {
      const diffSecondTime = parseInt((new Date().getTime() - initTime) / 1000)
      const hours = Math.floor(diffSecondTime / 3600)
      const minutes = Math.floor(diffSecondTime % 3600 / 60)
      const seconds = Math.floor(diffSecondTime % 3600 % 60)
      console.log(diffSecondTime, hours, minutes, seconds)
      setHour(addZero(hours))
      setMinute(addZero(minutes))
      setSencond(addZero(seconds))
    }, 1000)
    setTimer(timer)
  }
  const reset = () => {
    setHour('00')
    setMinute('00')
    setSencond('00')
    clearInterval(timer)
  }

  return (
    <div className="hook">
      <button type="button" onClick={clickCountBtn}>
        count: {count}
      </button><br />
      <button type="button" onClick={clickNumberBtn}>
        number: {number}
      </button><br />
      <button type="button" onClick={clickPersonBtn}>
        person: name-{person.name}, age-{person.age}
      </button>
      {/* 3 useContext useReducer 参考ContextReducer.jsx */}
      <TestUseReducer></TestUseReducer>
      {/* 4 useMemo */}
      <TestUseMemo></TestUseMemo>
      {/* 5 useCallback */}
      <TestUseCallback></TestUseCallback>
      {/* 6 useRef */}
      <div>
        <div>输入：<input type="text" value={text} onChange={(e) => setText(e.target.value)} /></div>
        <div>复制：<input type="text" ref={inputRef} /></div>
      </div>
      {/* 7 自定义hook */}
      <TextCustomHook></TextCustomHook>
      {/* 计时器 */}
      <div className='content'>
        <div className="item">{hour}</div>
        <div className="indiv">:</div>
        <div className="item">{minute}</div>
        <div className="indiv">:</div>
        <div className="item">{sencond}</div>
        <button onClick={start}>开始计时</button>
        <button onClick={reset}>重置计时</button>
      </div>
    </div>
  );
}